<template>
    <div class="trade-set">
        <van-popup v-model="show" position="bottom" round :closeable="true" @close="handlerclose">
            <div class="trade-content">
                <div class="trade-title">{{ $t('title.set_password') }}</div>
                <div class="trade-tips">{{ $t('new.desc31') }}</div>
                <div class="trade-pass" v-if="!hasTrue">
                    <div>{{ $t('new.desc32') }}</div>
                    <p><input type="text" maxlength="6" v-model="password"
                            onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :placeholder="$t('new.desc34')"></p>
                </div>
                <div class="trade-pass" v-if="!hasTrue">
                    <div>{{ $t('new.desc33') }}</div>
                    <p><input type="text" maxlength="6" v-model="conpassword"
                            onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :placeholder="$t('new.desc35')"></p>
                </div>
                <div class="trade-pass" v-if="hasTrue">
                    <div>{{ $t('new.desc23') }}</div>
                    <p><input type="text" maxlength="6" v-model="oldpassword"
                            onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :placeholder="$t('new.desc24')"></p>
                </div>
                <div class="trade-pass" v-if="hasTrue">
                    <div>{{ $t('new.desc25') }}</div>
                    <p><input type="text" maxlength="6" v-model="password"
                            onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :placeholder="$t('new.desc26')"></p>
                </div>
                <div class="trade-pass" v-if="hasTrue">
                    <div>{{ $t('new.desc33') }}</div>
                    <p><input type="text" maxlength="6" v-model="conpassword"
                            onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :placeholder="$t('new.desc28')"></p>
                </div>
                <div class="trade-passbtn flexcenter" @click="handelrSet">{{ $t('word.save') }}</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: ['hasTrue', 'showSet'],
    data() {
        return {
            show: this.showSet,
            password: '',
            conpassword: '',
            oldpassword:''
        }
    },
    methods: {
        handlerclose() {
            this.$emit('handlerClose')
        },
        handelrSet() {
            if (this.password == '') {
                this.$toast(this.$t('new.desc34'))
                return;
            }
            if (this.password != this.conpassword) {
                this.$toast(this.$t('login.doc101'))
                return;
            }
            this.$post(this.URL.user.uppw, {
                accountType: 2,
                password: this.$md5(this.password),
                oldPassword:this.$md5(this.oldpassword)
            }).then(res => {
                if (res.code == 0) {
                    this.$toast(this.$t('set.pass_set_done'));
                    this.$emit('handlerClose')
                } else {
                    this.$toast(res.message)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .trade-set{
        /deep/ .van-popup{
            background: #fff;
        }
    }
.trade-content {
    min-height: 7rem;
    padding-bottom: .8rem;

    .trade-title {
        padding: .3rem;
        font-size: .36rem;
        color: #000;
        text-align: center;
    }

    .trade-tips {
        padding: .3rem 0;
        font-size: .28rem;
        color: #2A64E4;
        text-align: center;
        background: #F5F6F9;
    }

    .trade-pass {
        position: relative;
        background: #fff;
        padding: .2rem;
        display: flex;
        font-size: .3rem;
        color: #222;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: .2rem;
            width: 7.1rem;
            height: 0.02rem;
            background: #F5F6F9;
        }

        div {
            flex: 0 0 3rem;
        }

        p {
            flex: 1;
            text-align: right;

            input {
                border: 0;
                background: none;
                text-align: right;

                &::placeholder {
                    color: #C8C8C8;
                }
            }
        }
    }

    .trade-passbtn {
        margin: .3rem auto 0;
        width: 7.1rem;
        height: 0.88rem;
        background: #2a64e4;
        font-size: .32rem;
        color: #FFFFFF;
        border-radius: 0.12rem;
    }
}
</style>